<script setup>
import { useRouter } from 'vue-router'

// const route = useRoute()
const router = useRouter()

const props = defineProps(['news']);

const clickBox = () => { 
    router.push(`/news/${props.news.id}`)
}

</script>
<template>
    <!-- {{ news.day + news.content }} -->
    <div @click="clickBox" class="box">
        <div class="time">
            <span style="font-size: 24px;height: 24px;">{{ news.day }}</span>
            <span style="font-size: 24px;">{{ news.month }}</span>
            <span style="font-size: 12px">{{ news.year }}</span>
        </div>
        <div class="word">
            <h3>{{ news.title }}</h3>
            <span>布宫动态</span>
            <p>{{ news.content1 }}</p>
            <div class="more"></div>
        </div>
    </div>
</template>

<style scoped>
.word h3 {
    margin: 0;
    color: #222222;
}

.word span {
    font-size: 12px;
    color: #666666;
}

.word p {
    margin: 0;
    color: #333333;
}

span {
    color: #D9C18E;
}

.more {
    background-image: url('@/assets/more5.gif');
    width: 67px;
    height: 20px;
    background-repeat: no-repeat;
    margin-top: 10px;
}

.word {
    height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.box {
    height: 160px;
    width: 100%;
    display: flex;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
}

.time {
    height: 80px;
    width: 55px;
    margin: 0 30px 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    border: 1px solid #d9c18e;
}

.box:hover {
    background-color: rgb(150, 41, 26);
    color: white;
    cursor: pointer;
}

.box:hover * {
    color: white;
}

.box:hover .time {
    border: 1px solid #fff;
}

.box:hover .more {
    background-image: url('@/assets/more5on.gif');
}

/* .box:hover .time span,
.box:hover .word h3,
.box:hover .word span,
.box:hover .word p {
    color: white;
} */
</style>